<template>
  <div>
    <p>箭头函数</p>
  </div>
</template>
<script setup lang="ts">
// console.log("THIS", this);

const obj = {
  name: "John",
  sayHi: function () {
    setTimeout(() => {
      // console.log(`Hi, I'm ${this.name}`);
    }, 1000);
  },
  // arrowFuc.vue(17, 16): 此容器隐藏了 "this" 的外部值。
  // 无法使用this 除非是局部的this
  // say: function () {
  //   setTimeout(function () {
  //     console.log(`Hi, I'm ${this.name}`);
  //   }, 1000);
  // },
};
obj.sayHi();
// obj.say();

const sum = (...args: number[]) => {
  // console.log("arguments arrow", arguments); 箭头函数没有arguments
  let total = 0;
  for (const num of args) {
    total += num;
  }
  return total;
};
// console.log(sum(1, 2, 3));

const num = function (s1: number, s2: number, s3: number) {
  // console.log("arguments no arrow", arguments);
  let total = 0;
  for (const num of arguments) {
    total += num;
  }
  return total;
};

// console.log(num(1, 2, 3));
</script>
